<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>新增更新查看用户</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <style>
      body {
        background-color: #ffffff;
      }
    </style>
  </head>

  <body>
    <!-- <form> -->
    <form enctype="multipart/form-data">
      <div class="layui-form layuimini-form" style="margin-left: -41px">
        <div class="layui-form-item">
          <label class="layui-form-label required">组长</label>
          <div class="layui-input-block">
            <!-- <span class="layui-badge-dot"></span> -->
            <!-- <input type="text" name="groupMan" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input"> -->
            <input
              type="checkbox"
              name="groupMan"
              lay-skin="switch"
              lay-text="组长|非组长"
            />
            <!-- <tip>填写自己管理账号的名称。</tip> -->
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label required">组名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="groupName"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <!-- HF  下拉框 -->
        <div id="check_box" style="margin-left: 40px"></div>
        <div class="layui-form-item">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-block">
            <input
              type="text"
              onkeyup="this.value=this.value.replace(/[, ]/g,'')"
              name="loginName"
              lay-verify="required"
              placeholder="请输入账号"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input
              type="text"
              onkeyup="this.value=this.value.replace(/[^(\w\.\,\?\/)]/g,'')"
              name="passwd"
              placeholder="请输入密码"
              lay-verify="required"
              class="layui-input"
            />
            <tip>请输入密码（限：数字/字母/？ . ，）</tip>
          </div>
        </div>
        <!-- <div class="layui-form-item">
            <label class="layui-form-label">type</label>
            <div class="layui-input-block">
                <input type="text" name="typo" placeholder="请输入职业" value="" class="layui-input">
            </div>
        </div> -->
        <div class="layui-form-item">
          <label class="layui-form-label required">权限</label>
          <div class="layui-input-block">
            <input
              type="radio"
              name="typoDesc"
              value="普通用户"
              title="普通用户"
              checked
            />
            <input
              type="radio"
              name="typoDesc"
              value="运检管理"
              title="运检管理"
            />
            <input
              type="radio"
              name="typoDesc"
              value="系统管理"
              title="系统管理"
            />
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">用户描述</label>
          <div class="layui-input-block">
            <textarea
              name="userDesc"
              class="layui-textarea"
              placeholder="请输入用户描述信息"
            ></textarea>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">图片上传</label>
          <div class="layui-input-block">
            <!-- 用于接受上传的图片 -->
            <!-- <img src="img.jpg" alt="" id="picture"> -->
            <!-- 用于上传文件 -->
            <input class="file-upload" type="file" name="logo" id="logo" />
          </div>
        </div>
        <div class="layui-form-item" id="saveData">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">
              确认保存
            </button>
          </div>
        </div>
      </div>
    </form>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script
      src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"
      charset="utf-8"
    ></script>
    <script src="../../js/xm-select.js" charset="utf-8"></script>
    <script>
      // console.log(file_data);
      layui.use(["form", "table"], function () {
        var form = layui.form,
          layer = layui.layer,
          $ = layui.$,
          table = layui.table;
        var token = sessionStorage.getItem("newtoken");
        var seeNaN = sessionStorage.getItem("Hsee");
        var seeName = sessionStorage.getItem("HseeName");
        var groupName = sessionStorage.getItem("HgroupName");

        if (seeNaN == "55") {
          //监听提交
          $("input[name='groupName']").val(groupName).attr("readOnly", "true");

          form.on("submit(saveBtn)", function (data) {
            // 根据单选框  增加typo值
            var typo = $('input[name="typoDesc"]:checked ').val();
            if (typo == "普通用户") {
              data.field.typo = "0";
            } else if (typo == "运检管理") {
              data.field.typo = "1";
            } else {
              data.field.typo = "2";
            }
            //复选框 值
            data.field.groupMan =
              data.field.groupMan && data.field.groupMan == "on" ? 1 : 0;

            var index = layer.confirm(
              "确定提交数据吗？",
              {
                btn: ["确定", "取消"], //按钮
              },
              function () {
                var other_data = $("form").serialize();
                var file = $("#logo").get(0).files[0];
                var fileSize = file.size,
                  fileType = file.type;
                if (file.name.lastIndexOf(".") == -1) {
                  layer.msg("路径不正确");
                  return false;
                }
                var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|.swf|";
                var extName = file.name
                  .substring(file.name.lastIndexOf("."))
                  .toLowerCase();
                if (AllImgExt.indexOf(extName + "|") == -1) {
                  layer.msg("非法图片格式");
                  return false;
                }
                if (fileSize < 3145728) {
                  if (window.FileReader) {
                    var reader = new FileReader();
                    reader.readAsBinaryString(file);
                    reader.onload = function (e) {
                      var formData = new FormData();
                      formData.append("logo", file);
                      $.ajax({
                        url: "/oms-web/users?token=" + token + "&" + other_data, //后台地址
                        type: "post",
                        data: formData,
                        contentType:
                          "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW", //格式转换为binary
                        processData: false, // 使数据不做处理
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                          console.log(data);
                          if (data.code == -1) {
                            // window.location = '../login-1.html'
                          }
                          if (data.code == 0) {
                            layer.msg(
                              "创建成功",
                              { icon: 1, time: 100 },
                              function () {
                                parent.layer.close(iframeIndex);
                                window.parent.location.reload(); //修改成功后刷新父界面
                              }
                            );
                          } else {
                            layer.msg(data.msg, { icon: 2 }, function () {
                              // parent.layer.close(iframeIndex);
                            });
                          }
                        },

                        error: function () {
                          layer.msg("数据出错！");
                        },
                      });
                    };
                  } else {
                    layer.msg("图片大小超过限制");
                    return false;
                  }
                }
                //关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                // parent.layer.close(iframeIndex);
              }
            );

            return false;
          });
        } else if (seeNaN == "56") {
          var check_html = "";
          check_html += '<div class="layui-form-item">';
          check_html +=
            '<label class="layui-form-label required">站点列表</label>';
          check_html +=
            '<div class="layui-input-block"><div id="demo2" class="xm-select-demo"></div></div></div>';
          $("#check_box").html(check_html);

          var demo2 = xmSelect.render({
            el: "#demo2",
            direction: "down",
            toolbar: { show: true },
            data: [],
          });

          // 查询当前用户下的站点
          $.ajax({
            url:
              "/oms-web/users/getStationByName?token=" +
              token +
              "&userName=" +
              seeName,
            dataType: "json",
            type: "get",
            contentType: "application/json",
            success: function (data) {
              if (data.code == -1) {
                window.location = "../login-1.html";
              }
              if (data.code == 0) {
                var arr_d = [];
                for (let i = 0; i < data.data.length; i++) {
                  var o = {};
                  o.name = data.data[i].text;
                  o.value = i;
                  o.selected = true;
                  //    o.disabled = true;
                  arr_d.push(o);
                }

                demo2.update({
                  data: arr_d,
                  disabled: true,
                  autoRow: true,
                });
              } else {
                layer.msg(data.msg, { time: 1000 });
              }
            },
            error: function () {
              layer.msg("数据出错！");
            },
          });

          $.ajax({
            url: "/oms-web/users/" + seeName + "?token=" + token,
            dataType: "json",
            type: "get",
            async: false,
            // data:JSON.stringify(data.field),
            contentType: "application/json",
            success: function (data) {
              if (data.code == -1) {
                window.location = "../login-1.html";
              }
              $("#saveData").remove();
              if (data.code == 0) {
                // 查看   获取值 填入
                if (data.data.groupMan == 0) {
                  $("input[type='checkbox'][name='groupMan']").prop(
                    "checked",
                    false
                  );
                } else {
                  $("input[type='checkbox'][name='groupMan']").prop(
                    "checked",
                    true
                  );
                }
                $("input[type='checkbox'][name='groupMan']").prop(
                  "disabled",
                  true
                );
                $("input[name='groupName']")
                  .val(data.data.groupName)
                  .attr("readOnly", "true");
                $("input[name='loginName']")
                  .val(data.data.loginName)
                  .attr("readOnly", "true");
                $("input[name='passwd']")
                  .val(data.data.passwd)
                  .attr("readOnly", "true");
                // $("input[name='typo']").val(data.data.typo).attr("readOnly",'true');
                $("[name='userDesc']")
                  .val(data.data.userDesc)
                  .attr("readOnly", "true");
                $(
                  "input:radio[name='typoDesc'][value='" +
                    data.data.typoDesc +
                    "']"
                ).prop("checked", "checked");
                $("input:radio[name='typoDesc']").attr("disabled", "true");
                form.render();
              } else {
                layer.msg("无法查看数据！", { icon: 2 }, function () {
                  // parent.layer.close(iframeIndex);
                });
              }
            },
            error: function () {
              layer.msg("数据出错！");
            },
          });
        } else if (seeNaN == "57") {
          // jquery插入多选框
          var check_html = "";
          check_html += '<div class="layui-form-item">';
          check_html +=
            '<label class="layui-form-label required">站点列表</label>';
          check_html +=
            '<div class="layui-input-block"><div id="demo2" class="xm-select-demo"></div></div></div>';
          $("#check_box").html(check_html);

          var demo2 = xmSelect.render({
            el: "#demo2",
            direction: "down",
            toolbar: { show: true },
            data: [],
          });

          // 调接口填充数据
          $.ajax({
            url: "/oms-web/users/" + seeName + "?token=" + token,
            dataType: "json",
            type: "get",
            async: false,
            // data:JSON.stringify(data.field),
            contentType: "application/json",
            success: function (data) {
              if (data.code == -1) {
                window.location = "../login-1.html";
              }
              if (data.code == 0) {
                // 更新数据
                if (data.data.groupMan == 0) {
                  $("input[type='checkbox'][name='groupMan']").prop(
                    "checked",
                    false
                  );
                } else {
                  $("input[type='checkbox'][name='groupMan']").prop(
                    "checked",
                    true
                  );
                }
                $("input[name='groupName']").val(data.data.groupName);
                $("input[name='loginName']").val(data.data.loginName);
                $("input[name='passwd']").val(data.data.passwd);
                // $("input[name='typo']").val(data.data.typo);
                $("[name='userDesc']").val(data.data.userDesc);
                $(
                  "input:radio[name='typoDesc'][value='" +
                    data.data.typoDesc +
                    "']"
                ).prop("checked", "checked");
                // $("input:radio[name='typoDesc']").attr("disabled",'true');
                form.render();
              } else {
                layer.msg("无法查看数据！", { icon: 2 }, function () {
                  // parent.layer.close(iframeIndex);
                });
              }
            },
            error: function () {
              layer.msg("数据出错！");
            },
          });

          // 循环展示数据给多选框
          function full_check(res) {
            $.ajax({
              url:
                "/oms-web/users/getstations?token=" +
                token +
                "&groupName=" +
                groupName,
              dataType: "json",
              type: "get",
              contentType: "application/json",
              success: function (data) {
                if (data.code == -1) {
                  window.location = "../login-1.html";
                }
                var result = [];
                for (var i = 0; i < data.data.length; i++) {
                  var obj = data.data[i];
                  var num = obj.text;
                  var isExist = false;

                  if (res != null && res != undefined) {
                    for (var j = 0; j < res.length; j++) {
                      var aj = res[j];
                      var n = aj.text;
                      if (n == num) {
                        isExist = true;
                        break;
                      }
                    }
                    if (!isExist) {
                      var lpp = {};
                      lpp.name = obj.text;
                      lpp.value = i;
                      lpp.stationCode = obj.code;
                    } else {
                      var lpp = {};
                      lpp.name = obj.text;
                      lpp.value = i;
                      lpp.stationCode = obj.code;
                      lpp.selected = true;
                      // lpp.disabled = true;
                    }
                    result.push(lpp);
                  } else {
                    var lpp = {};
                    lpp.name = obj.text;
                    lpp.value = i;
                    lpp.stationCode = obj.code;
                    result.push(lpp);
                  }
                }

                if (data.code == 0) {
                  // 多选框 插件
                  demo2.update({
                    data: result,
                    autoRow: true,
                  });
                }
              },
              error: function () {
                layer.msg("数据出错！");
              },
            });
          }

          // 查询当前用户下的站点
          $.ajax({
            url:
              "/oms-web/users/getStationByName?token=" +
              token +
              "&userName=" +
              seeName,
            dataType: "json",
            type: "get",
            contentType: "application/json",
            success: function (data) {
              if (data.code == -1) {
                window.location = "../login-1.html";
              }
              full_check(data.data);
            },
            error: function () {
              layer.msg("数据出错！");
            },
          });

          //  提交数据  两个接口   配置站点  更新
          form.on("submit(saveBtn)", function (data) {
            var stationCode = [];
            data.field.groupMan =
              data.field.groupMan && data.field.groupMan == "on" ? 1 : 0;
            // 根据单选框  增加typo值
            var typo = $('input[name="typoDesc"]:checked ').val();
            if (typo == "普通用户") {
              data.field.typo = "0";
            } else if (typo == "运检管理") {
              data.field.typo = "1";
            } else {
              data.field.typo = "2";
            }

            //获取当前多选选中的值
            var selectArr = demo2.getValue();
            for (let i = 0; i < selectArr.length; i++) {
              stationCode.push(selectArr[i].stationCode);
            }

            layer.confirm(
              "确定更新数据吗？",
              {
                btn: ["确定", "取消"], //按钮
              },
              function () {
                $.ajax({
                  url: "/oms-web/users/" + seeName + "?token=" + token,
                  dataType: "json",
                  type: "PUT",
                  async: false,
                  data: JSON.stringify(data.field),
                  contentType: "application/json",
                  success: function (data) {
                    if (data.code == -1) {
                      window.location = "../login-1.html";
                    }
                    if (data.code == 0) {
                      layer.msg(
                        "更新成功！",
                        { icon: 1, time: 1000 },
                        function () {
                          parent.layer.close(iframeIndex);
                          window.parent.location.reload(); //修改成功后刷新父界面
                        }
                      );
                    } else {
                      layer.msg("无法查看数据！", { icon: 2 }, function () {
                        // parent.layer.close(iframeIndex);
                      });
                    }
                  },
                  error: function () {
                    layer.msg("数据出错！");
                  },
                });

                // 更新多个站名列表
                $.ajax({
                  url:
                    "/oms-web/users/updatestationAuthority?token=" +
                    token +
                    "&userName=" +
                    seeName,
                  dataType: "json",
                  type: "post",
                  async: false,
                  data: JSON.stringify(stationCode),
                  contentType: "application/json",
                  success: function (data) {
                    if (data.code == -1) {
                      window.location = "../login-1.html";
                    }
                    if (data.code == 0) {
                      layer.msg(
                        "配置站点成功！",
                        { icon: 1, time: 1000 },
                        function () {
                          parent.layer.close(iframeIndex);
                          window.parent.location.reload(); //修改成功后刷新父界面
                        }
                      );
                    } else {
                      layer.msg("配置站点失败！", { icon: 2 }, function () {
                        // parent.layer.close(iframeIndex);
                      });
                    }
                  },
                  error: function () {
                    layer.msg("数据出错！");
                  },
                });
              }
            );
            //关闭弹出层
            var iframeIndex = parent.layer.getFrameIndex(window.name);
          });
        }
      });
    </script>
  </body>
</html>
